<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <style>
        #userInfoDialog {
            padding: 20px;
            width: 400px;
            display: none;
            /*隐藏层*/
        }

        #userInfoDialog p {
            padding: 10px 0;
        }
    </style>


</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">管理员列表</div>
            <div class="layui-card-body">
                <table id="adminlist" lay-filter="adminFilter"></table>
            </div>
        </div>
    </div>
    <!--管理员信息对话框-->
    <div id="userInfoDialog">
        <table class="layui-table">
            <tr>
                <td>用户名</td>
                <td><span id="username"></span></td>
            </tr>
            <tr>
                <td>添加时间</td>
                <td><span id="addtime"></span></td>
            </tr>
            <tr>
                <td>状态</td>
                <td><span id="status"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><span id="password"></span></td>
            </tr>
            <tr>
                <td>随机盐</td>
                <td><span id="salt"></span></td>
            </tr>
        </table>
    </div>

    <script src="../res/layui/layui.js"></script>
    <script>
        layui.use(function () {
            //加载获取table模块
            var table = layui.table;
            //加载获取layer弹层模块
            var layer = layui.layer;
            //加载jquery对象
            var $ = layui.jquery;
            var util = layui.util;

            // 表格数据渲染
            table.render({
                elem: '#adminlist',  //用于渲染数据的表格元素选择器
                url: 'http://127.0.0.1:8080/admin/list',  //服务端数据接口地址
                page: {
                    curr: 1,
                    limit: 5,
                    limits: [5, 10, 15, 20]
                },  //开启分页
                cols: [[
                    { type: 'checkbox' },
                    { title: '序号', type: 'numbers' },
                    { title: 'ID', field: 'id' },
                    { title: '账号', field: 'username' },
                    { title: '创建时间', field: 'addtime', templet: '<div>{{ layui.util.toDateString(d.addtime,"yyyy年MM月dd日 HH时mm分ss秒") }}</div>' },
                    {
                        title: '账号状态', field: 'status', templet: function (d) {
                            if (d.status === 0) {
                                //正常
                                return '<div class="layui-badge layui-bg-blue">正常</div>'
                            }
                            //禁用
                            return '<div class="layui-badge layui-bg-red">禁用</div>'
                        }
                    },
                    { title: '操作', templet: '#rowTools' }
                ]]
            })


            //绑定单元格工具事件
            table.on('tool(adminFilter)', function (obj) {
                //获取被点击元素的lay-event值，通过该值确定哪个按钮被点击
                let e = obj.event
                switch (e) {
                    case 'details':
                        //详情查看
                        layer.open({
                            type:1,                                //弹层类型 1：页面层
                            content:$('#userInfoDialog'),         //弹层dom元素
                            closeBtn:2,                           //标题栏关闭图标样式  
                            shadeClose:true,
                            success:function(layero,index,that){  //弹层被成功打开后回调   
                                layero.find('#username').text(obj.data.username)
                                layero.find('#addtime').text(obj.data.addtime)
                                layero.find('#status').html(obj.data.status===0 ? '<div class="layui-badge layui-bg-blue">正常</div>' : '<div class="layui-badge layui-bg-red">禁用</div>')
                                layero.find('#password').text(obj.data.password)
                                layero.find('#salt').text(obj.data.salt)
                            },
                            btn:['关闭'],   //自定义按钮
                            btnAlign:'c',   //自定义按钮位置 l-左  c-中  r-右
                            btn1:function(){    //自定按钮事件
                                layer.closeAll()
                            }
                        })
                        break;
                    case 'del':
                        //删除
                        layer.confirm('确认删除该管理员吗?', { icon: 3 }, function () {
                            $.ajax({
                                url: `http://127.0.0.1:8080/admin/del/${obj.data.id}`,
                                type: 'DELETE',
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg(resp.msg)
                                        //删除dom结构，并更新缓存
                                        obj.del()
                                    } else {
                                        layer.alert(resp.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        break;
                    case 'updateStatus':
                        //緩存當前被點擊的按鈕對象
                        let btn = $(this)
                        //修改状态
                        layer.confirm('确认修改吗?',{ icon: 3 }, function () {
                            //获取需要修改的数据行id
                            let id = obj.data.id
                            //获取需要修改成为状态
                            let status = btn.data('status')
                            //将数据封装为一个js对象
                            let data = {
                                id: id,
                                status: status
                            }
                            //发送ajax请求
                            $.ajax({
                                url: 'http://127.0.0.1:8080/admin/update',
                                type: 'PUT',
                                contentType: 'application/json',
                                data: JSON.stringify(data),
                                success: function (resp) {
                                    if (resp.code === 0) {
                                        layer.msg(resp.msg)
                                        //重新加载表格数据
                                        table.reloadData('adminlist', {
                                            scrollPos: 'fixed'  // 保持滚动条位置不变 
                                        })
                                    } else {
                                        layer.alert(resp.msg, { icon: 2 })
                                    }
                                }
                            })
                        })
                        break;
                }
            })

        })
    </script>


    <!--操作栏自定义模板-->
    <script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-list"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
        {{# if(d.status === 0){ }}
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="updateStatus" data-status="1">
            <i class="layui-icon layui-icon-close-fill"></i>
            禁用
        </button>
        {{# }else{ }}
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateStatus" data-status="0">
            <i class="layui-icon layui-icon-ok-circle"></i>
            启用
        </button>
        {{# } }}
    </div>
</script>


</body>

</html>